<template>
    <div>
        <ul class="app-image-list clearfix">
            <div class="js-img-list" style="display: inline-block">
                <draggable v-model="imageList" @end="onEnd">
                    <li class="upload-preview-img" v-for="(item, idx) in imageList" :key="item.id">
                        <img :src="item" class="js-image-preview" @click="setPic(item)">
                        <a class="js-delete-picture view-modal small hide" @click="viewImage(idx)"><i class="el-icon-search"></i></a>
                        <a class="js-delete-picture close-modal small hide" @click="removePic(item)">×</a>
                    </li>
                </draggable>
            </div>
            <li v-if="canAdd" @click="addPic" class="js-picture-btn-wrap" style="display:inline-block;float:none;vertical-align: top;">
                <a href="javascript:;" class="add js-add-picture" >+加图</a>
            </li>
        </ul>
        <pic-list
                :imageList.sync="imageList"
                :maxNum="maxNum"
                :showPicDialog="showPicDialog"
                @on-selected="picOnSelected"
                @on-close="picOnClose" />
    </div>
</template>
<script>
    import Viewer from 'viewerjs';
    import 'viewerjs/dist/viewer.css';
    import draggable from 'vuedraggable'
    export default {
        name: 'pic-sel',
        components: {
            'pic-list': () => import('./list'),
            draggable
        },
        props: {
            images: {
                type: Array,
                default: function() {
                    return []
                }
            },
            maxNum: {
                type: Number,
                default: 1
            },
            value: {
                type: String
            }
        },
        watch: {
            imageList(val) {
                if(val && val.length >= this.maxNum) {
                    this.canAdd = false
                } else {
                    this.canAdd = true
                }
            },
            value(val) {
                this.imageList = val ? val.split(",") : []
            }
        },
        data() {
            return {
                viewerId: null,
                showPicDialog: false,
                imageList: [],
                canAdd: true,
                currentPicItem: null
            }
        },
        created() {
            this.imageList = this.value ? this.value.split(",") : []
        },
        methods: {
            addPic() {
                this.currentPicItem = null;
                this.showPicDialog = true
            },
            viewImage(index) {
                let all_pic = [];
                if(this.imageList && this.imageList.length > 0) {
                    this.imageList.forEach((item)=>{
                        all_pic.push(item)
                    })
                }
                // setViewer(all_pic, index)

                $("#pic_viewer").html("");
                if(all_pic && all_pic.length > 0) {
                    all_pic.forEach((item, idx)=>{
                        var str  = '<li style="width:100%;">';
                        str += '<img rel-src="' + item + '" src="' + item + '">';
                        str += '</li>';
                        $("#pic_viewer").append(str);
                    })
                }
                this.viewerId && this.viewerId.destroy()
                this.viewerId = new Viewer(document.getElementById('pic_viewer'));
                $('#pic_viewer').find("img").eq(index).trigger("click")
            },
            picOnClose() {
                this.showPicDialog = false
            },
            picOnSelected(items) {
                if(items) {
                    if(!this.imageList) {
                        this.imageList = []
                    }
                    if(this.currentPicItem) {
                        //替换图片
                        // console.log(this.currentPicItem)
                        for(let i = 0; i < this.imageList.length; i++) {
                            if(this.imageList[i] == this.currentPicItem) {
                                this.imageList[i] = items[0];
                            }
                        }
                    } else {
                        for(let i = 0; i < items.length; i++) {
                            if(!this.imageList.includes(items[i])) {
                                this.imageList.push(items[i])
                            }
                        }

                        if(this.imageList.length > this.maxNum) {
                            this.imageList = this.imageList.slice(0, this.maxNum)
                        }
                    }

                    this.$emit('input', this.imageList.join(","));
                    this.$emit('change');
                }
            },
            removePic(uri) {
                if(this.imageList && this.imageList.includes(uri)) {
                    let index = this.imageList.indexOf(uri)
                    this.imageList.splice(index, 1)

                    this.$emit('input', this.imageList.join(","));
                    this.$emit('change');
                }
            },
            setPic(item) {
                this.currentPicItem = item;
                this.showPicDialog = true
            },
            onEnd() {
                this.$emit('input', this.imageList.join(","));
                this.$emit('change');
            }
        }
    }
</script>